<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>

    <!-- Basic Page Needs
    ================================================== -->
    <title>Hireo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- CSS
    ================================================== -->
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/colors/blue.css">

</head>
<body class="gray">

<!-- Wrapper -->
<div id="wrapper">

    <!-- Header Container
    ================================================== -->
    <header id="header-container" class="fullwidth dashboard-header not-sticky">

        <!-- Header -->
        <div id="header">
            <div class="container">

                <!-- Left Side Content -->
                <div class="left-side">

                    <!-- Logo -->
                    <div id="logo">
                        <a href="/index"><img src="/images/logo.png" alt=""></a>
                    </div>

                </div>
                <!-- Left Side Content / End -->


                <!-- Right Side Content / End -->

                <!-- 雇员登录信息 -->
                <div class="right-side" th:if="${session.employee != null}">
                    <!-- User Menu -->
                    <div class="header-widget">

                        <!-- Messages -->
                        <div class="header-notifications user-menu">
                            <div class="header-notifications-trigger">
                                <a href="#"><div class="user-avatar status-online"><img th:src="${session.employee.headImg}" alt=""></div></a>
                            </div>

                            <!-- Dropdown -->
                            <div class="header-notifications-dropdown">

                                <!-- User Status -->
                                <div class="user-status">

                                    <!-- User Name / Avatar -->
                                    <div class="user-details">
                                        <div class="user-avatar status-online"><img th:src="${session.employee.headImg}" alt=""></div>
                                        <div class="user-name">
                                            [[${session.employee.username}]] <span>自由职业者</span>
                                        </div>
                                    </div>

                                </div>

                                <ul class="user-menu-small-nav">
                                    <li><a href="/employee/dashboard"><i class="icon-material-outline-dashboard"></i>个人中心</a></li>
                                    <li><a href="/employee/logout"><i class="icon-material-outline-power-settings-new"></i> 退出登录</a></li>
                                </ul>

                            </div>
                        </div>

                    </div>
                    <!-- User Menu / End -->

                    <!-- Mobile Navigation Button -->
                    <span class="mmenu-trigger">
					<button class="hamburger hamburger--collapse" type="button">
						<span class="hamburger-box">
							<span class="hamburger-inner"></span>
						</span>
					</button>
				</span>

                </div>

                <!-- 雇主登录信息 -->
                <div class="right-side" th:if="${session.employer != null}">

                    <!-- User Menu -->
                    <div class="header-widget">

                        <!-- Messages -->
                        <div class="header-notifications user-menu">
                            <div class="header-notifications-trigger">
                                <a href="#"><div class="user-avatar status-online"><img th:src="${session.employer.headImg}" alt=""></div></a>
                            </div>

                            <!-- Dropdown -->
                            <div class="header-notifications-dropdown">

                                <!-- User Status -->
                                <div class="user-status">

                                    <!-- User Name / Avatar -->
                                    <div class="user-details">
                                        <div class="user-avatar status-online"><img th:src="${session.employer.headImg}" alt=""></div>
                                        <div class="user-name">
                                            [[${session.employer.username}]] <span>雇主</span>
                                        </div>
                                    </div>

                                </div>

                                <ul class="user-menu-small-nav">
                                    <li><a href="/employer/dashboard"><i class="icon-material-outline-dashboard"></i>个人中心</a></li>
                                    <li><a href="/employer/logout"><i class="icon-material-outline-power-settings-new"></i> 退出登录</a></li>
                                </ul>

                            </div>
                        </div>

                    </div>
                    <!-- User Menu / End -->

                    <!-- Mobile Navigation Button -->
                    <span class="mmenu-trigger">
					<button class="hamburger hamburger--collapse" type="button">
						<span class="hamburger-box">
							<span class="hamburger-inner"></span>
						</span>
					</button>
				</span>

                </div>

                <!-- 未登录 -->
                <div class="right-side" th:if="${session.employee == null && session.employer == null}">

                    <div class="header-widget">
                        <a href="/login" class="log-in-button" style="margin-top: -24px;"><i class="icon-feather-log-in"></i> <span>登录</span></a>
                        <a href="/register" class="log-in-button"><i class="icon-feather-log-in"></i> <span>注册</span></a>
                    </div>

                    <!-- Mobile Navigation Button -->
                    <span class="mmenu-trigger">
                        <button class="hamburger hamburger--collapse" type="button">
                            <span class="hamburger-box">
                                <span class="hamburger-inner"></span>
                            </span>
                        </button>
				    </span>

                </div>

                <!-- Right Side Content / End -->

            </div>
        </div>
        <!-- Header / End -->

    </header>
    <div class="clearfix"></div>
    <!-- Header Container / End -->

    <!-- Spacer -->
    <div class="margin-top-90"></div>
    <!-- Spacer / End-->

    <!-- Page Content
    ================================================== -->
    <div class="container">
        <div class="row">
            <div class="col-xl-3 col-lg-4">
                <div class="sidebar-container">
                    <form>
                        <!-- Category -->
                        <div class="sidebar-widget">
                            <h3>任务分类</h3>
                            <select name="categoryId" class="selectpicker default" data-selected-text-format="count"  title="所有分类" >
                                <option th:selected="${categoryId == taskCategory.id}" th:value="${taskCategory.id}" th:each="taskCategory : ${taskCategories}">[[${taskCategory.categoryName}]]</option>
                            </select>
                        </div>

                        <!-- Keywords -->
                        <div class="sidebar-widget">
                            <h3>关键词</h3>
                            <div class="keywords-container">
                                <div class="keyword-input-container">
                                    <input name="key" type="text" th:value="${key}" class="keyword-input" placeholder="搜索"/>
                                </div>
                                <div class="keywords-list"><!-- keywords go here --></div>
                                <div class="clearfix"></div>
                            </div>
                        </div>

                        <!-- Search -->
                        <button type="submit" class="button ripple-effect" style="width: 100%">搜索</button>
                    </form>

                    <div class="clearfix"></div>

                </div>
            </div>
            <div class="col-xl-9 col-lg-8 content-left-offset">

                <h3 class="page-title">搜索结果</h3>
                <h4>总共搜索出 [[${tasksPage.total}]] 条结果</h4>

                <!-- Tasks Container -->
                <div class="tasks-list-container margin-top-35">

                    <!-- Task -->
                    <a th:href="@{'/task/page?taskId=' + ${task.id}}" class="task-listing" th:each="task : ${tasksPage.list}">

                        <!-- Job Listing Details -->
                        <div class="task-listing-details">

                            <!-- Details -->
                            <div class="task-listing-description">
                                <h3 class="task-listing-title">[[${task.taskTitle}]]</h3>
                                <ul class="task-icons">
                                    <li><i class="icon-material-outline-access-time"></i>[[${task.beforeTime}]]</li>
                                </ul>
                                <span th:title="${#lists.contains(bookMarkedIds, task.id)} ? '取消收藏该任务' : '收藏该任务'" th:class="${#lists.contains(bookMarkedIds, task.id)} ? 'bookmark-icon bookmarked' : 'bookmark-icon'" th:onclick="'bookmarked('+ ${task.id} +')'"></span>
                                <p class="task-listing-text">[[${task.taskProfile}]]</p>
                                <div class="task-tags" >
                                    <span th:each="skill: ${task.skills}" style="margin-left: 5px;">[[${skill.skillName}]]</span>
                                </div>
                            </div>

                        </div>

                        <div class="task-listing-bid">
                            <div class="task-listing-bid-inner">
                                <div class="task-offers">
                                    <strong>￥[[${task.feesLow}]] -￥[[${task.feesHigh}]]</strong>
                                </div>
                                <span class="button button-sliding-icon ripple-effect">立即投标<i class="icon-material-outline-arrow-right-alt"></i></span>
                            </div>
                        </div>
                    </a>

                    <!-- Pagination -->
                    <div class="clearfix"></div>
                    <div class="row">
                        <div class="col-md-12">
                            <!-- Pagination -->
                            <div class="pagination-container margin-top-60 margin-bottom-60">
                                <nav class="pagination">
                                    <ul>
                                        <div th:if="${tasksPage.total == 0}">
                                            <h2>暂无搜索结果！</h2>
                                        </div>
                                        <div th:if="${tasksPage.total != 0}">
                                            <li class="pagination-arrow"><a th:if="${tasksPage.page == 1}" href="#"><i class="icon-material-outline-keyboard-arrow-left"></i></a></li>
                                            <li class="pagination-arrow"><a th:if="${tasksPage.page > 1}" th:href="@{'/task/list?categoryId=' + ${categoryId} + '&key=' + ${key} + '&page=' + ${tasksPage.page - 1}}"><i class="icon-material-outline-keyboard-arrow-left"></i></a></li>
                                            <li th:each="i : ${#numbers.sequence(1, tasksPage.pageTotal)}"><a th:href="@{'/task/list?categoryId=' + ${categoryId} + '&key=' + ${key} + '&page=' + ${i}}" th:class="${tasksPage.page == i  ? 'ripple-effect current-page' : ''}" >[[${i}]] </a></li>
                                            <li class="pagination-arrow"><a th:if="${tasksPage.page >= tasksPage.pageTotal}" href="#"><i class="icon-material-outline-keyboard-arrow-right"></i></a></li>
                                            <li class="pagination-arrow"><a th:if="${tasksPage.page < tasksPage.pageTotal}" th:href="@{'/task/list?categoryId=' + ${categoryId} + '&key=' + ${key} + '&page=' + ${tasksPage.page + 1}}" class="ripple-effect"><i class="icon-material-outline-keyboard-arrow-right"></i></a></li>
                                        </div>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                    <!-- Pagination / End -->

                </div>
                <!-- Tasks Container / End -->

            </div>
        </div>
    </div>


    <!-- Footer
================================================== -->
    <div id="footer">

        <!-- Footer Top Section -->
        <div class="footer-top-section">
            <div class="container">
                <div class="row">
                    <div class="col-xl-12">

                        <!-- Footer Rows Container -->
                        <div class="footer-rows-container">

                            <!-- Left Side -->
                            <div class="footer-rows-left">
                                <div class="footer-row">
                                    <div class="footer-row-inner footer-logo">
                                        <img src="images/logo2.png" alt="">
                                    </div>
                                </div>
                            </div>

                        </div>
                        <!-- Footer Rows Container / End -->
                    </div>
                </div>
            </div>
        </div>
        <!-- Footer Top Section / End -->
        <!-- Footer Copyrights -->
        <div class="footer-bottom-section">
            <div class="container">
                <div class="row">
                    <div class="col-xl-12">
                        © 2018 <strong>yuu</strong>. All Rights Reserved.
                    </div>
                </div>
            </div>
        </div>
        <!-- Footer Copyrights / End -->

    </div>
    <!-- Footer / End -->

</div>
<!-- Wrapper / End -->

<!-- Scripts
================================================== -->
<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/js/jquery-migrate-3.0.0.min.js"></script>
<script src="/js/mmenu.min.js"></script>
<script src="/js/tippy.all.min.js"></script>
<script src="/js/simplebar.min.js"></script>
<script src="/js/bootstrap-slider.min.js"></script>
<script src="/js/bootstrap-select.min.js"></script>
<script src="/js/snackbar.js"></script>
<script src="/js/clipboard.min.js"></script>
<script src="/js/counterup.min.js"></script>
<script src="/js/magnific-popup.min.js"></script>
<script src="/js/slick.min.js"></script>
<script src="/js/custom.js"></script>



<!-- 自定义 Script -->
<script>
    /**
     * 收藏
     */
    function bookmarked(taskId) {
        $.post({
            url: '/employee/bookmarked',
            data: {
                "taskId": taskId
            },
            error: function (data) {
                if (data.status == 401) {
                    window.location.href = "/login"
                }
            }
        })
    }
</script>
</body>
</html>
